<template>
	<view>
		<view class="naem_input">
			<input v-model="name" placeholder="请输入昵称" :auto-focus="true" type="nickname" confirm-type="done" @change="getNickname" />
		</view>
		<view class="btn" :class="btnactive ? 'btn_active' : ''" @click="handleSave">保存</view>
	</view>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { toast } from '@/utils/common';
import { setUser } from '@/api/user.js';
const name = ref('');
const btnactive = ref(false);
watch(name, (newvlue, oldvalue) => {
	btnactive.value = newvlue.length > 0;
});
const getNickname = (e) => {
	name.value = e.detail.value;
};
const handleSave = () => {
	if (btnactive.value) {
		setUser({ name: name.value }).then((res) => {
			if (res.code == 200) {
				toast('昵称已修改');
				setTimeout(() => {
					uni.navigateBack();
				}, 500);
			}
		});
	}
};
onLoad((option) => {
	name.value = option.name;
});
</script>

<style lang="scss">
page {
	background: #f7f8f6;
}
.naem_input {
	width: 710rpx;
	height: 100rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #75613e;
	margin: 20rpx auto;
	line-height: 100rpx;
	input {
		padding-left: 20rpx;
		line-height: 100rpx;
		height: 100rpx;
		width: 100%;
	}
}
.btn {
	width: 710rpx;
	height: 88rpx;
	background: #eee8d8;
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #d8c6a7;
	text-align: center;
	line-height: 88rpx;
	margin: 60rpx auto;
}
.btn_active {
	color: #75613e;
	background: #d8c6a7;
}
</style>
